<template>
    <link rel="stylesheet" href="http://tp.x-mii.com/storage/yyjk/css/screen.css">
    <link rel="stylesheet" href="http://tp.x-mii.com/storage/yyjk/css/common.css">
    <Header />


    <!-- <div class="banner hidden-xs" style="background: url(https://www.sheng-han.com/upload/cms/20190904/bcb36355814cbb6a2294e50b2c96dc99.jpg) center no-repeat; margin-top:0"> -->
    <div class="banner hidden-xs category-banner" style="center no-repeat; margin-top:0"
        :style="{ backgroundImage: 'url(' + category.image_url + ')' }">

        <div class="ban-con haocai-ban-con w12 " style="display: none;">
            <div>
                <h5 class="fadeInDown animated">{{ category.name }}</h5>
                <i class="ban-xian fadeInUp animated"></i>
                <p class="fadeInUp animated">{{ category.name }}</p>
            </div>
        </div>
    </div>


    <section>

        <div class="breadcrumbs">
            <div class="w12">
                <p class="fl wow animated fadeInLeft animated animated"
                    style="/* visibility: visible; *//* animation-name: fadeInLeft; */">
                    <a href="/">首页 </a>

                    <template v-for="item in category_path">
                        &gt;
                        <a :href="'/yyjk/category/' + item.id">{{ item.name }} </a>
                    </template>
                </p>
                <ul class="inside-nav fr wow animated fadeInRight animated animated"
                    style="visibility: visible; animation-name: fadeInRight;">

                    <li v-for="item in category_bro">
                        <a :href="'/yyjk/category/' + item.id" :class="category.id == item.id ? 'active' : ''">
                            {{ item.name }}
                        </a>
                    </li>

                </ul>
            </div>
        </div>


        <div class="lizi haocai w12">
            <ul>

                <template v-for="item in article_list">
                    <li class="wow animated fadeInUp animated animated" data-wow-offset="10" data-wow-delay="0.2s"
                        style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                        <div class="kuang">
                            <a :href="'/yyjk/article/' + item.id" class="scale-img">
                                <img :src="vite_url + '/storage/' + item.image">
                            </a>
                            <span>
                                <a :href="'/yyjk/article/' + item.id">
                                    <h5>{{ item.subtitle?item.subtitle:'&nbsp;' }}</h5>
                                    <h4>{{ item.title }}</h4>
                                </a>
                            </span>
                        </div>

                    </li>
                </template>

            </ul>
            <div class="clearfix"></div>
            <div class="listpage wow animated fadeInUp animated animated" data-wow-offset="10" data-wow-delay="0.2s"
                style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
            </div>
        </div>

    </section>

    <YyjkFooterSub />
</template>

<script lang="ts" setup>
import Header from '../../../components/common/Header.vue'
// import YyjkFooter from '../../../components/yyjk/common/Footer.vue'
import YyjkFooterSub from '../../../components/yyjk/common/FooterSub.vue'


import { ref } from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router';
const vite_url = window.VITE_URL;
const category_id: any = ref<number>(0);
const category: any = ref<object>();
const category_path: any = ref<Array<object>>();
const category_bro: any = ref<Array<object>>();
const article_list: any = ref<Array<object>>();

const route = useRoute();
const get_category_info = () => {

    const url = vite_url + '/cms/category/' + category_id.value;
    axios.get(url).then((res: any) => {

        category.value = res.data.category;
        if (category.value.image) {
            category.value.image_url = vite_url + '/storage/' + category.value.image;
        } else {
            category.value.image_url = 'http://api.qd-ian.com/storage/images/8/cms/yhyj/lunbo1.jpg';
        }
        category_path.value = res.data.category_path.path;

    });
}

const get_category_bro = () => {

    const url = vite_url + '/cms/category_bro/' + category_id.value + '';
    axios.get(url).then((res: any) => {

        category_bro.value = res.data;

    });
}

const get_category_article = () => {

    const url = vite_url + '/cms/category_article/' + category_id.value + '';
    axios.get(url).then((res: any) => {

        article_list.value = res.data;

    });
}

const init = () => {

    category_id.value = route.params.id ? route.params.id : 0;
    get_category_info();
    get_category_bro();
    get_category_article();
}

init();
</script>

<style lang="less" scoped>
@media only screen and (min-width: 1024px) {
// @media only screen and (min-width: 1440px) {
    .haocai {

        ul {

            li {

                width: 25%;
                margin:0;
                margin-bottom:20px;

                padding:0 ;    
                box-sizing: border-box;        
                background-color:transparent;
                border-color:transparent;
                &:hover{
                    border-color:#409eff;
                    background-color:#409eff;
                    
                }
                .kuang {

                    
                    // box-sizing: border-box;
                    // background: #f0f0f0;

                    a.scale-img {
                        width: 100%;
                        height: 236px;
                        img {
                            // width: 100%;
                        }
                    }

                    span {}
                }
            }
        }
    }
}
</style>